<template>
  <div class="focus banxin">
    <div class="notlogin">
      <div class="welc">
        你可以关注明星和好友品味他们的私房歌单<br />
        通过他们的动态发现更多精彩音乐
      </div>
      <a href="javascript:;" @click="goLogin">立即登录</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //点击登录按钮
    goLogin() {
      //触发mutations打开login
      this.$store.commit("changeLoginShow", true);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.focus {
  background-color: #fff;
  height: 700px;
  overflow: hidden;
  .notlogin {
    width: 902px;
    height: 357px;
    margin: 0 auto 0;
    margin-top: 70px;
    background-position: 0 70px;
    background: url("../assets/images/notlogin.jpg") no-repeat center 0;
    .welc {
      padding: 177px 0 0 552px;
      line-height: 23px;
      font-size: 14px;
      color: #666;
    }
    a {
      display: block;
      width: 157px;
      height: 48px;
      /* border: 1px solid #000; */
      margin: 36px 0 0 557px;
      text-align: center;
      line-height: 48px;
      text-indent: -9999px;
    }
  }
}
</style>